<script setup>
import headerBar from '@/components/header/index.vue'
import footerBar from '@/components/footer/index.vue'
import {ArrowRightBold} from '@element-plus/icons-vue'
</script>
<template>
    <div class="circle">
        <header-bar :index="0"></header-bar>
        <div class="circle-content">
            <div class="circle-content-item">
                <div class="circle-content-header">
                    <div class="circle-content-user">
                        <img src="../../assets/images/avatar.png" alt="" />
                        <div class="circle-content-user-name">用户昵称</div>
                    </div>
                    <div class="circle-content-header-date">
                        2024.10.11-10:15
                    </div>
                </div>
                <div class="circle-content-text">
                    不同肤质适合的化妆品各有不同。中性皮肤水油适中，基本适合所有类型的产品。干性皮肤分为缺油型和缺水型，缺油型皮肤干燥易起皮，毛孔细小，适合滋润型产品；缺水型多为中老年人，皮肤干燥粗糙、松弛老化，适宜补水产品。油性皮肤油脂旺盛，易长黑头和痘痘，毛孔粗大，适合使用不含油的产品。混合性皮肤多因后天因素形成，具有多种皮肤特征，适用不含油产品，若部分区域太干可搭配滋润型产品。敏感性皮肤易泛红，皮质薄，有红肿、刺痛、干痒等现象，适用专门针对敏感肌肤的产品。
                </div>
                <div class="circle-content-img">
                    <img src="../../assets/images/module-bg01.png" alt="">
                    <img src="../../assets/images/module-bg01.png" alt="">
                    <img src="../../assets/images/module-bg01.png" alt="">
                    <img src="../../assets/images/module-bg01.png" alt="">
                    <img src="../../assets/images/module-bg01.png" alt="">
                    <img src="../../assets/images/module-bg01.png" alt="">
                </div>
                <div class="circle-content-original-text">
                    <div class="circle-content-original-text-pic">
                        <img src="../../assets/images/poster.png" alt="">
                    </div>
                    <div class="circle-content-original-text-content">
                        <div class="circle-content-original-text-content-title">
                            初源漾美白祛斑套装的成分及特点
                        </div>
                        <div class="circle-content-original-text-content-text">
                            初源漾美白祛斑套装具有多种独特的成分和显著的特点。其核心成分包括烟酰胺、天女木兰提取物、熊果苷、3-o -
                            乙基抗坏血酸。专利成分天女木兰提取物是太古第四纪冰川时期幸存的珍稀名贵花卉，被称为 “天然的抑黑成分”，能有效从源头拦截黑色素，抑制其生成。烟酰胺、熊果苷、3-o -
                            乙基抗坏血酸则从黑色素的各个通路阻止其产生，实现多通路全方位的美白淡斑，让肌肤保持白皙透亮。
                            此外，套装还特别复配了透明质酸、玻尿酸、角鲨烷、北美金缕梅提取物等舒缓保湿成分。透明质酸和玻尿酸具有出色的补水保湿效果，为肌肤带来充足水动力，使其保持水润 Q
                            弹。角鲨烷和北美金缕梅提取物能有效舒缓、修复敏感和泛红的肌肤，安抚肌肤的 “小情绪”，让肌肤在美白淡斑过程中保持稳定。
                            初源漾美白祛斑套装安全性极高，是国家唯一认证、经过国家食品药品监督管理局严格审批的 “国妆特字” 产品，0 香精 0 激素 0
                            刺激，品质有保障，适合任何肤质使用。套装包含爽肤水、精华液、祛斑霜和补水面膜四件单品，成分天然，效果显著。爽肤水能打开肌肤吸收通道，实现深层补水；精华液可滋养肌肤，改善暗沉和肤色不均；祛斑霜能瓦解黑色素、淡化斑点；补水面膜为肌肤分解黑色素提供充足水动力，套装搭配让美白淡斑效果更长效持久。
                            消费者选择化妆品的误区
                            消费者在选择化妆品时存在多种误区。首先，盲目追求名牌产品，过于崇拜名牌而忽视产品的安全性和适用性。其次，过分信赖广告宣传，易被夸大或误导的功效宣称所迷惑。再者，过分相信他人推荐，而不同人的肤质差异大，适合他人的未必适合自己。还有，高频率更换化妆品，若已使用的产品效果良好且无不适，频繁更换不利于皮肤养护，还可能增加安全风险。从非正规渠道购买产品也是一大误区，这些渠道监管薄弱，产品质量安全难以保证。此外，从不阅读化妆品标签，导致无法了解产品的成分、使用说明等关键信息。最后，贪图便宜购买大量打折或即将过期的化妆品，可能造成浪费甚至带来安全隐患。
                            化妆品使用的注意事项
                            在使用化妆品时，有诸多方面需要注意。化妆工具应经常更新，两用型的粉底和水粉饼使用后要清洗干净并甩干存放，以防长霉斑，变色或变硬的海绵应及时更换。化妆品需避免过期使用，护肤型化妆品放置过久可能因日晒、氧化而变质，影响美容效果，装饰性化妆品也会因时间长而效果不佳。应选用经卫生部批准的优质化妆品，避免使用劣质产品，以防其中的有毒物质危害皮肤。使用化妆品时忌用手指直接挑用，以免将细菌带入化妆品中，宜用竹签挑出，一旦化妆品沾手，切勿再放回瓶内。常用药效化妆品也不可取，可能会杀灭皮肤上的常在菌，导致病菌产生抗药性，增加治疗疾病的难度。对于进口化妆品，不能盲目迷信，应考虑东方人与西方人的肤质差异，不能不加选择地使用。化妆品存放要注意环境，避免阳光直射和靠近火源。标有
                            “使用前必须摇匀” 的化妆品，应充分摇匀后使用。使用气雾型化妆品要注意喷射方向，避免射入眼睛，且绝对禁止将空容器投入火中。
                            另外，消费者应根据肤质选择化妆品，干性皮肤应选择温和的洗面奶和具有保湿功效的护肤品，及时补充水分；油性皮肤要避免选用碱性太强的洗面奶，做好保湿，少用或不用粉质化妆品；混合型肌肤可选择油性肌肤适用的洗面奶，按干性肌肤的方式使用护肤品，及时补充水分并深度保湿面颊。对于护肤品的存放，并非都适合放冰箱，使用前应了解相关注意事项。
                            选购化妆品时，应通过正规途径购买，查询产品登记信息，观察产品质量，查看成分标识，试用产品并留存购买凭证。网购化妆品要选择正规合法网站，仔细查看产品标签和资质证明，不买信息不全的产品，不盲目轻信宣传，谨慎购买低价产品，索要发票并保存电子凭证。辨识化妆品质量时，可通过观颜色、闻气味、看稀稠、察表层等方法判断是否变质。儿童化妆品有更谨慎的配方安全考量，家长为儿童选购时要注意产品是否适用，可先做
                            “皮试”。
                        </div>
                    </div>
                    <div class="circle-content-original-text-more">
                        <el-icon><ArrowRightBold /></el-icon>
                    </div>
                </div>
                <div class="circle-content-tool">
                    <div class="circle-content-tool-item dianzan">点赞</div>
                    <div class="circle-content-tool-item pinglun">评论</div>
                    <div class="circle-content-tool-item fenxiang">分享</div>
                </div>
            </div>
        </div>
        <footer-bar></footer-bar>
    </div>
</template>
<style lang="scss" scoped>
.circle {
    width: 100%;
    background-image: url('../../assets/images/circle-bg.png');
    background-repeat: repeat;
    background-size: cover;

    &-content {
        width: 1128px;
        margin: 0 auto;

        &-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        &-item {
            background: #FFFFFF;
            border-radius: 20px;
            padding: 30px;
            box-sizing: border-box;
        }

        &-user {
            display: flex;
            align-items: center;

            img {
                display: block;
                width: 50px;
                height: 50px;
                border-radius: 50%;
            }

            &-name {
                font-family: MiSans VF, MiSans VF;
                font-size: 22px;
                color: #000000;
                line-height: 26px;
                margin-left: 12px;
            }
        }

        &-text {
            font-family: MiSans VF, MiSans VF;
            font-size: 20px;
            color: #000000;
            line-height: 30px;
            text-align: justify;
            margin-top: 30px;
            margin-bottom: 15px;
        }

        &-img {
            display: flex;
            flex-wrap: wrap;

            img {
                display: block;
                width: 230px;
                height: 230px;
                margin-bottom: 15px;
            }

            img+img {
                margin-left: 16px;
            }

            img:nth-child(4n+1) {
                margin-left: 0;
            }
        }

        &-original-text {
            display: flex;
            background: #F5F5F5;
            border-radius: 16px;
            cursor: pointer;
            &-pic {
                width: 120px;
                height: 120px;
                border-radius: 8px;
                margin: 16px;
                img {
                    display: block;
                    width: 100%;
                    height: 100%;
                    border-radius: 8px;
                }
            }

            &-content {
                width: 860px;
                text-align: justify;
                padding: 20px 0;
                box-sizing: border-box;

                &-title {
                    font-family: MiSans VF, MiSans VF;
                    font-size: 18px;
                    color: #000000;
                    line-height: 24px;
                    text-align: justify;
                }

                &-text {
                    font-family: MiSans VF, MiSans VF;
                    font-size: 14px;
                    color: #777777;
                    line-height: 21px;
                    text-align: justify;
                    margin-top: 8px;
                    display: -webkit-box;
                    -webkit-line-clamp: 3; /* 显示的行数 */
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                }
            }
            &-more{
                margin-top: 70px;
                margin-left: 26px;
            }
        }
        &-tool{
            display: flex;
            justify-content: flex-end;
            margin-top: 50px;
            &-item{
                font-family: MiSans VF, MiSans VF;
                font-size: 22px;
                height: 30px;
                line-height: 30px;
                color: #777777;
                padding-left: 50px;
                background-repeat: no-repeat;
                background-position: left center;
                background-size: 30px 30px;
                cursor: pointer;
            }
            &-item:hover{
                color: #45A1FF;
            }
            &-item+&-item{
                margin-left: 120px;
            }
            .dianzan{
                background-image: url('../../assets/icons/dianzan.png');
            }
            .pinglun{
                background-image: url('../../assets/icons/pinglun.png');
            }
            .fenxiang{
                background-image: url('../../assets/icons/share.png');
            }
            .dianzan:hover{
                background-image: url('../../assets/icons/dianzanA.png');
            }
            .pinglun:hover{
                background-image: url('../../assets/icons/pinglunA.png');
            }
            .fenxiang:hover{
                background-image: url('../../assets/icons/shareA.png');
            }
        }
    }
}
</style>